import React, { useState, useEffect } from 'react'
import { Form, Space, Button, DatePicker, Select } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { FilterContainer } from '@/appComponents/Filter'
import { getAdmList, getEmergencyItems } from '&/api/electricity'
import dayjs from 'dayjs'
const Filter = ({ onQuery, paramsData, setParamsData }) => {
  const [countValues, setCountValues] = useState([])

  useEffect(() => {
    getAdmListData()
  }, [])

  const getAdmListData = async () => {
    const res = await getAdmList({ adm_level: '3' })
    res.unshift({ county_id: -1, county_name: '全部' })
    setCountValues(res)
  }
  const onQueryChange = (v, t) => {
    if (t == 'time') {
      const st = v[0].format('YYYY-MM-DD')
      const et = v[1].format('YYYY-MM-DD')
      setParamsData((state) => {
        state.start_time = st
        state.end_time = et
        return {
          ...state
        }
      })
    }
    if (t == 'area') {
      setParamsData((state) => {
        state.county_id = v
        return {
          ...state
        }
      })
    }
  }

  const click = () => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (paramsData[key] != (-1 || '-1')) {
        newParamsData[key] = paramsData[key]
      }
    }
    onQuery && onQuery(newParamsData)
  }
  return (
    <FilterContainer>
      <Form name="horizontal_login" layout="inline">
        <Form.Item label="时间：">
          <DatePicker.RangePicker
            disabled
            showTime={'YYYY-MM-DD'}
            showNow
            value={[dayjs(paramsData.start_time), dayjs(paramsData.end_time)]}
            format={'YYYY-MM-DD'}
            onChange={(v) => {
              onQueryChange(v, 'time')
            }}
          />
        </Form.Item>
        <Form.Item label="区域选择">
          <Select
            placeholder={`请选择`}
            value={paramsData?.county_id}
            onChange={(v) => onQueryChange(v, 'area')}
          >
            {countValues &&
              countValues.map((item, index) => {
                return (
                  <Select.Option key={index} value={item.county_id}>
                    {item.county_name}
                  </Select.Option>
                )
              })}
          </Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button
              type="primary"
              onClick={() => click('query')}
              icon={<SearchOutlined></SearchOutlined>}
            >
              查询
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </FilterContainer>
  )
}

export default Filter
